<template>
    <div id="app">
        <div>
            <span>姓名:</span>
            <input type="text" v-model="name" />
        </div>
        <div>
            <span>年龄:</span>
            <input type="number" v-model="age" />
        </div>
        <div>
            <span>性别:</span>
            <select v-model="sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div>
            <button @click="add">添加/修改</button>
        </div>
        <div>
            <table border="1" cellpadding="10" cellspacing="0">
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item,index in arr" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.sex}}</td>
                    <td>
                        <button @click="del(index)">删除</button>
                        <button @click="change(item.id)">编辑</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                arr: [{
                        id: 1,
                        name: 'zs',
                        age: 10,
                        sex: '男'
                    },
                    {
                        id: 2,
                        name: 'ls',
                        age: 20,
                        sex: '女'
                    },
                    {
                        id: 3,
                        name: 'ww',
                        age: 14,
                        sex: '男'
                    },
                ],
                name: '',
                age: '',
                sex: '',
                type: ''
            }
        },
        methods: {
            change(tar) {
                this.type = tar
            },
            add() {
                if (this.name == '' || this.age == '' || this.sex == '') {
                    alert('信息不全')
                    return false
                }
                if (this.type == '') {
                    let id = this.arr.length == 0 ? 1 : this.arr.length + 1
                    let person = {
                        name: this.name,
                        age: this.age,
                        sex: this.sex,
                        id
                    }
                    this.arr.push(person)
                    this.name = this.age = this.sex = ''
                } else {
                    let person = {
                        name: this.name,
                        age: this.age,
                        sex: this.sex,
                        id: this.type
                    }
                    this.arr.splice(this.type - 1, 1, person)
                    this.type = this.name = this.age = this.sex = ''
                }
            },
            del(tar) {
                this.arr.splice(tar - 1, 1)
                this.type = this.name = this.age = this.sex = ''
            }
        }
    }
</script>